<template>
  <!-- 头部展示 -->
  <div class="num-box">
    <div class="num-box-item">
      <div>
        累计推广总分佣（元）
        <i class="el-icon-warning" @click="showEchart"></i>
      </div>
      <div class="bum-text">¥{{ state.statisticsData.saleAmount }}</div>
    </div>
    <div class="num-box-item">
      <div>累计总提现（元）</div>
      <div class="bum-text">¥{{ state.statisticsData.withdraw }}</div>
    </div>
    <div class="num-box-item">
      <div>累计总客户（人）</div>
      <div class="bum-text">{{ state.statisticsData.customerCnt }}人</div>
    </div>
    <div class="num-box-item">
      <div>累计推广订单数（笔）</div>
      <div class="bum-text">{{ state.statisticsData.orderCnt }}笔</div>
    </div>
    <div class="num-box-item">
      <div>累计推广订单总额（元）</div>
      <div class="bum-text">¥{{ state.statisticsData.payAmount }}</div>
    </div>
  </div>
  <!-- 表格 -->
  <search-list
    :api-url="url.SaleStatisList"
    :option="searchOpt"
    :itemPerRow="8"
    :beforeQuery="beforeQuery"
    @getSearchData="getSearchData"
  >
    <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
    <el-table-column prop="id" label="推广员" show-overflow-tooltip>
      <template #="scope">
        <img v-if="scope.row.avatar" :src="scope.row.avatar" class="list-img" alt="" />
        {{ scope.row.nickname }}
      </template>
    </el-table-column>
    <el-table-column
      prop="username"
      label="推广员姓名"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="phone"
      label="推广员手机号"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="superior"
      label="上级推广员"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column prop="orderCnt" label="直接推广订单数" show-overflow-tooltip align="center">
      <template #header>
        <el-tooltip
          class="item"
          effect="dark"
          content="成功推广课程或有课VIP产生购买的订单数"
          placement="top"
        >
          <span>
            直接推广订单数
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="indirectOrderCnt"
      label="间接推广订单数"
      show-overflow-tooltip
      align="center"
    >
      <template #header>
        <el-tooltip
          class="item"
          effect="dark"
          content="下级推广员成功推广课程或有课VIP产生购买的订单数"
          placement="top"
        >
          <span>
            间接推广订单数
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="payAmount"
      label="推广订单总额（元）"
      show-overflow-tooltip
      align="center"
    >
      <template #header>
        <el-tooltip class="item" effect="dark" content="直接订单与间接订单金额之和" placement="top">
          <span>
            推广订单总额（元）
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
      <template #="scope">{{ scope.row.payAmount }}元</template>
    </el-table-column>
    <el-table-column prop="customerCnt" label="累计客户（人）" show-overflow-tooltip align="center">
      <template #header>
        <el-tooltip class="item" effect="dark" content="累计推广产生购买的人数" placement="top">
          <span>
            累计客户（人）
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
      <template #="scope">{{ scope.row.customerCnt }}人</template>
    </el-table-column>
    <el-table-column prop="saleAmount" label="累计收益（元）" show-overflow-tooltip align="center">
      <template #header>
        <el-tooltip
          class="item"
          effect="dark"
          content="当前所有有效订单产生的分佣收益"
          placement="top"
        >
          <span>
            累计收益（元）
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
      <template #="scope">{{ scope.row.saleAmount }}元</template>
    </el-table-column>
    <el-table-column prop="withdraw" label="已结算收益（元）" show-overflow-tooltip align="center">
      <template #header>
        <el-tooltip
          class="item"
          effect="dark"
          content="所有已过缓冲期的订单产生的佣金收益，表示可进入财务审核以及操作分佣（目前缓冲期为7天）"
          placement="top"
        >
          <span>
            已结算收益（元）
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
      </template>
      <template #="scope">{{ scope.row.withdraw }}元</template>
    </el-table-column>
    <template v-slot:btn-after class="btn-after">
      <el-button type="success" icon="el-icon-download" @click="exportList">导出Excel</el-button>
    </template>
  </search-list>
  <!-- 详情 -->
  <el-dialog v-model="dialogVisible" title="累计推广总分佣" width="660px" center>
    <Charts></Charts>
  </el-dialog>
</template>
<script>
  import { getCurrentInstance, onMounted, reactive, ref, watch, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  import Charts from '@/components/Charts.vue';

  import dayjs from 'dayjs';
  export default {
    components: {
      Charts,
    },
    setup() {
      const {
        $url: url,
        $service: service,
        JSON_HEADER: JSON_HEADER,
        $selectFormat: selectFormat,
      } = getCurrentInstance().appContext.config.globalProperties;
      // data
      // 筛选
      const searchOpt = ref([
        {
          type: 'el-input',
          name: 'nickname',
          label: '推广员昵称',
        },
        {
          type: 'el-input',
          name: 'username',
          label: '姓名',
        },
        {
          type: 'el-input',
          name: 'phone',
          label: '手机号',
        },
        {
          type: 'el-date-picker',
          name: 'startTime',
          label: '统计时间',
        },
      ]);
      const dialogVisible = ref(false);
      const state = reactive({
        // 统计数据
        statisticsData: {},
        // 筛选的数据
        searchData: [],
      });

      // methods
      // 搜索之前
      const beforeQuery = ({ searchInfo }) => {
        // 这里就得处理element的坑(转格式)
        for (let key in searchInfo) {
          if (searchInfo[key] instanceof Date) {
            searchInfo[key] = dayjs(searchInfo.startTime).format('YYYY-MM-DD HH:mm:ss');
          }
        }
      };
      // 得到搜索数据
      const getSearchData = (val) => {
        state.searchData = val;
      };
      // 展示统计图
      const showEchart = () => {
        dialogVisible.value = true;
      };
      // 导出列表
      const exportList = () => {
        service.SaleStatisDownload(state.searchData, { responseType: 'blob' }).then((res) => {
          var blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          let url = window.URL.createObjectURL(blob);
          let el = document.createElement('a');
          document.body.appendChild(el);
          el.href = url;
          el.download = '业绩统计列表' + '.xlsx';
          el.click();
          window.URL.revokeObjectURL(url);
        });
      };
      // 加载统计数据
      const getStatisticsData = () => {
        service.SaleStatis().then((res) => {
          state.statisticsData = res;
        });
      };

      // life
      onMounted(() => {
        // 加载统计数据
        getStatisticsData();
      });

      return {
        url,
        service,
        JSON_HEADER,
        selectFormat,
        searchOpt,
        // data
        dialogVisible,
        state,
        // methods
        exportList,
        showEchart,
        beforeQuery,
        getSearchData,
      };
    },
  };
</script>
<style scoped lang="less">
  /* 表格图片 */
  .list-img {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    vertical-align: middle;
  }
  /* 数量 */
  .num-box {
    display: flex;
    justify-content: space-between;
    .num-box-item {
      width: 180px;
      height: 70px;
      padding-top: 20px;
      border: 1px solid #ddd;
      text-align: center;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      .bum-text {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
</style>
